<template>
  <div class="wrapper">
      <el-form :inline="true">
        <el-form-item>
          <el-input type="text" placeholder="请输入客户名称" v-model="customerName"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchItem(true)">查询</el-button>
          <el-button type="primary" @click="exportExcel()">导出</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-table :height="tableHeight" ref="table" :data="tableData" @sort-change='sortChange' border >
          <el-table-column label="客户名称" prop="name" min-width="100" align="center"></el-table-column>
          <el-table-column label="客户编号" prop="code" min-width="100" align="center"></el-table-column>
          <el-table-column label="级别" prop="levelCode" min-width="100" align="center"></el-table-column>
          <el-table-column label="国家" prop="countryName" min-width="100" align="center"></el-table-column>
          <el-table-column label="经理" prop="contactPerson" min-width="100" align="center"></el-table-column>
          <el-table-column label="平台来源" prop="fromPlat" min-width="100" align="center"></el-table-column>
          <el-table-column label="首次下单时间" prop="settingDate" min-width="120" align="center"></el-table-column>
          <el-table-column label="升(降)级日期" prop="upgradeDate" min-width="120" align="center"></el-table-column>
          <el-table-column label="客户年限" prop="yearOfCustomer" min-width="100" align="center"></el-table-column>
          <el-table-column label="今年销售额" prop="yearSaleValue" min-width="100" align="center">
            <template slot-scope="scope">
              <div style="cursor:pointer;color:#409eff" @click="jumpDetailOrder(scope.row.id)">{{scope.row.yearSaleValue}}</div>
            </template>
          </el-table-column>
          <el-table-column label="去年同期业绩" prop="lastYearSaleValue" min-width="120" align="center"></el-table-column>
          <el-table-column label="同比增长(%)" sortable='custom' prop="yoyGrowth" min-width="130" align="center"></el-table-column>
          <el-table-column label="周年业绩" prop="anniversaryYearSaleValue" min-width="130" align="center"></el-table-column>
          <el-table-column label="等级变化" prop="upgradeTrace" min-width="130" align="center"></el-table-column>
<!--          <el-table-column label="上周年业绩" prop="lastAnniversaryYearSaleValue" min-width="130" align="center"></el-table-column>
          <el-table-column label="周年业绩同比增长(%)" prop="anniYoyGrowth" min-width="190" align="center"></el-table-column>-->
          <el-table-column label="是否独代" prop="isSole" min-width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.isSole === 1? '是': '否'}}
            </template>
          </el-table-column>
          <el-table-column label="销售负责人" prop="salorName" min-width="100" align="center"></el-table-column>
          <el-table-column label="是否跟单" prop="isFollow" min-width="100" align="center">
            <template slot-scope="scope">
              {{scope.row.isFollow === 1? '是': '否'}}
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="page"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
  </div>
</template>

<script>
  import dingMixin from  '@/mixins/ding'
  import formUtil from '@/utils/formUtil'
  import FileSaver from 'file-saver'
  import XLSX from 'xlsx'

  export default {
    data () {
      return {
        tableData: [],
        customerName: '',
        pageSize: 10,
        page:1,
        totalPage: 0,
        level: '',
        name: '',
        asc: true,
        tableHeight: window.tableHeight
      }
    },
    components: {
    },
    mixins: [dingMixin],
    activated() {
      this.tableHeight = document.documentElement['clientHeight'] - 270
      window.onresize = () => {
        this.tableHeight = document.documentElement['clientHeight'] - 270
      }
    },
    mounted(){
      this.level = this.$route.query.level;
      this.name = this.$route.query.name;
      this.searchItem(true);
    },
    methods: {
      async searchItem(init) {
        if(init) this.page = 1;
        let data = await this.$httpN.postB('mpb/report/customer',{
          customerName: this.customerName,
          level: this.level,
          page: this.page,
          limit: this.pageSize,
          asc: this.asc
        })
        this.tableData = data.list;
        this.totalPage = data.totalCount
      },
      jumpDetailOrder(customerId){
        console.log(customerId)
        this.$router.push({path: 'nmpb-b2blr', query: { tabName: 'B2B', menuId: '1266244596708511745', customerId: customerId}})
      },
      sizeChangeHandle(limit) {
        this.pageSize = limit;
        this.searchItem(true);
      },
      currentChangeHandle(page) {
        this.page = page;
        this.searchItem();
      },
      sortChange(column){
        this.asc = column.order!=='descending'
        this.searchItem(true)
      },
      async exportExcel() {
        let data = await this.$httpN.get('mpb/customer/export', {
          customerName: this.customerName,
          level: this.level,
        }, 'blob')
        this.downFile(data, `AST客户.xls`);
      },
      downFile(blob, fileName) {
        if (window.navigator.msSaveOrOpenBlob) {
          navigator.msSaveBlob(blob, fileName);
        } else {
          var link = document.createElement('a');
          link.href = window.URL.createObjectURL(blob);
          link.download = fileName;
          link.click();
          window.URL.revokeObjectURL(link.href);
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .wrapper{
    width: 100%;
  }
</style>
